<!--
 * @Description: 文章列表组件
 * @Author: Huang Junjie
 * @Date: 2021-05-08 10:38:43
 * @LastEditTime: 2021-07-07 10:29:39
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="article-list-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <!-- 标题栏 -->
      <div class="title">
        <div class="point-icon" />
        <span>{{ title }}</span>
        <div
          class="more-btn"
          @click="goToArticleMoreView(dtId)"
        >
          更多
          <i class="el-icon-arrow-right" />
        </div>
      </div>
      <!-- 标题栏 -->

      <!-- 列表 -->
      <el-scrollbar>
        <div class="data-list-div">
          <div
            v-for="(item, index) in dataList"
            :key="`a${index}`"
            class="data-list"
            @click="goToArticleDetailView(item)"
          >
            <a v-if="item !== null" class="link-style">
              <el-row>
                <el-col :span="2">
                  <div v-if="index === 0" class="spot-img-style">
                    <img width="16px" height="16px" :src="require('@/assets/images/jjxt/icon/article-icon.png')">
                  </div>
                  <div v-if="index !== 0" class="spot-style" />
                </el-col>
                <el-col class="link-title-div" :span="17">
                  <span v-if="item.title.length <= 15" class="link-title">{{ item.title }}</span>
                  <el-tooltip v-else effect="dark" :content="item.title" placement="top">
                    <span class="link-title">{{ item.title }}</span>
                  </el-tooltip>
                </el-col>
                <el-col :span="5">
                  <span class="link-date">{{ getDatatime(new Date(item.createDatetime), 0, 10) }}</span>
                </el-col>
              </el-row>
            </a>
          </div>
        </div>
      </el-scrollbar>
      <!-- 列表 -->
    </div>
  </div>
</template>

<script>
import { getArticleDataList } from '@/api/jjxt';
import { getDatatime } from '@/utils';
import { getToken } from '@/utils/auth';

export default {
  props: {
    // 标题
    title: {
      type: String,
      default() {
        return '';
      }
    },

    // 每页条数
    pageSize: {
      type: Number,
      default() {
        return 5;
      }
    },

    // 文章类型字典id
    dtId: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      hasToken: getToken() && getToken() !== 'undefined',

      // 查询列表请求参数
      getDataListData: {
        dtId: 'BUREAU_ARTICLE000001',
        itemValue: this.dtId,
        type: 2,
        page: 1,
        size: 20
      },

      // 返回值
      dataList: []
    };
  },
  mounted() {
    this.getArticleDataList(); // 查询文章信息列表
  },
  methods: {
    getDatatime,

    // 查询文章信息列表
    getArticleDataList() {
      this.getDataListData = {
        dtId: 'BUREAU_ARTICLE000001',
        itemValue: this.dtId,
        type: 2,
        page: 1,
        size: this.pageSize
      };
      getArticleDataList(this.getDataListData).then(res => {
        this.dataList = res.data.records;
      });
    },

    // 跳转文章更多页面
    goToArticleMoreView(id) {
      let articleTypeName = '';
      switch (this.getDataListData.itemValue) {
        case 'ARTICLE_000001':
          articleTypeName = '安全管理';
          break;
        case 'ARTICLE_000002':
          articleTypeName = '设备管理';
          break;
        case 'ARTICLE_000003':
          articleTypeName = '高铁管理';
          break;
        case 'ARTICLE_000004':
          articleTypeName = '普铁管理';
          break;
        case 'ARTICLE_000005':
          articleTypeName = '电力管理';
          break;
      }
      this.$router.push({ path: '/article-more-view', query: { id: id, typeName: articleTypeName }});
    },

    // 跳转文章详情页面
    goToArticleDetailView(item) {
      if (item.viewRange === 'All') {
        this.$router.push({ path: '/article-detail-view', query: { id: item.id, viewRange: item.viewRange }});
      } else if (this.hasToken) {
        if (item.id) {
          this.$router.push({ path: '/article-detail-view', query: { id: item.id, viewRange: item.viewRange }});
        }
      } else if (!this.hasToken) {
        this.$confirm('系统识别您尚未登录，是否跳转登录页面？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            window.location.assign('/login');
          })
          .catch(() => {});
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.article-list-style {
  position: relative;
  color: white;
  width: 470px;
  overflow: hidden;
  box-sizing: border-box;
  .component-inner-div {
    border: 2px solid #122a57;
    height: 100%;
    background-color: rgba($color: #0b1945, $alpha: 0.33);
    box-sizing: border-box;
    .title {
      color: #3695FF;
      font-size: 20px;
      padding-bottom: 15px;
      margin: 22px 18px 0 18px;
      align-items: center;
      display: flex;
      border-bottom: 1px solid rgba(11, 98, 163, 0.5);
      .point-icon {
        background-color: #3695FF;
        height: 10px;
        width: 10px;
        margin-right: 10px;
      }
      .more-btn {
        position: absolute;
        right: 20px;
        color: #eaea4d;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .el-scrollbar {
      position: absolute;
      top: 59px;
      left: 0;
      right: 0;
      bottom: 0;
      ::v-deep .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    .data-list-div {
      margin-top: 20px;
      .data-list {
        margin: 0 20px 16px 20px;
        // display: flex;
        align-items: center;
        .link-style {
          .spot-img-style {
            height: 10px;
          }
          .spot-style {
            width: 5px;
            height: 5px;
            background-color: #ffffff;
            border-radius: 5px;
            margin: 7px 10px 0 9px;
          }
          .link-title-div {
            padding-right: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            .link-title {
              color: #fcfeff;
            }
          }
          .link-date {
            font-size: 14px;
            color: #b7b9c0;
          }
        }
      }
    }
  }
}
</style>
